<template>
    <div>
        <!-- <exam 
        :pname="pname"
        :select="selectList[1]"
        ></exam> -->
    <el-row type="flex"  justify="center"  style="margin: 50px 0px 180px;">
  <el-col :span="14" >
    <el-card >
        <div slot="header" class="clearfix">
            <span>{{pname}}</span>
            
        </div>
        <div>{{index+1}}.{{selectList[index].name}}</div>


        <div class="option">A.{{selectList[index].optionA}}</div>
        <div class="option">B.{{selectList[index].optionB}}</div>
        <div class="option">C.{{selectList[index].optionC}}</div>
        <div class="option">D.{{selectList[index].optionD}}</div>
        <el-radio-group v-model="answer" @change="aAadio">
            <el-radio-button  label=1>A</el-radio-button>
            <el-radio-button  label=2>B</el-radio-button>
            <el-radio-button  label=4>C</el-radio-button>
            <el-radio-button  label=8>D</el-radio-button>
        </el-radio-group>

        
        <el-button style="float:right" @click="next" class="nextButton">下一题</el-button>
        
         <router-link :to="{name:'evaluation',params:{answerList:answerList,pId:pId,testId:testId,uId:user.id}}" style="text-decoration: none;font-size:15px;">
             <el-button style="float:right;margin-right:10px" class="sub" >提交</el-button>
        </router-link>

    </el-card>

    <el-collapse>
        <el-collapse-item title="查看答题卡" name="1">
             <el-row >
                <el-button  v-for="(j,index) in selectList.length" :key="index"  :type='aCardList[index]' @click="datika(index)" >{{j}}</el-button>
            </el-row>
        </el-collapse-item>
    </el-collapse>
  </el-col>
</el-row>
    </div>
</template>


<style>

.el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background-color:#4f81c7;
    border-color:#4f81c7;
    box-shadow:-1px 0 0 0 #4f81c7;
}

.sub{
    width: 115px;
}
.sub:focus,.sub:hover{

    color:#606266;
    border-color:#DCDFE6;
    background-color:#fff;
}


.nextButton{
    width: 115px;
}

.nextButton:focus,.nextButton:hover{
    color:#606266;
    border-color:#DCDFE6;
    background-color:#fff;
}




</style>


<script>
import axios from 'axios'
import exam from '@/components/examcompent'
import paperApi from '@/api/paperApi';
import userApi from '@/api/userApi';
export default {
    
    asyncData({params}){
        return paperApi.getIntroduce(params.id).then(response =>{
            return {
                selectList: response.data.data.selectList,
                pname:response.data.data.paper.name,
                pId: response.data.data.paper.id,
                testId:params.testId
            }
        })
    },
    

    data(){ 
        return{
            user:{
                id:null
                },
            index:0,
            status:'',
            radio:'',
            activeNames:'',
            answer:null,
            answerList:[]
        }
    },

    created(){
        this.canswerList()
        this.aCardList()
        this.getuser()
    },

    methods:{

        getuser(){
          userApi.verify().then(response =>{
            this.user = response.data.data
          })
        },
        
        //已选择选项
        aAadio(value){
            this.answerList[this.index] = value
            this.aCardList[this.index] = "info"
        },

        aCardList(){
            var aCardList = [];
            for(var n =0;n < this.selectList.length;n++){
                aCardList[n] = ''
            }
        },

        canswerList(){
            for(var n =0;n < this.selectList.length;n++){
                this.answerList[n] = 0
            }
        },

        datika(dindex){
            this.index = dindex
            this.answer = this.answerList[dindex]
        },
        

        next:function(){
            
            if(this.index+1 <this.selectList.length){
                if(this.answer != null){
                    this.aCardList[this.index] = "info"
                    console.log(this.answer)
                }
                // this.answerList[this.index] = this.answer
                this.answer = this.answerList[this.index+1]

                this.index++
            }else{
                //提示提交
                this.$message({
                    message: '请点击提交！',
                    type: 'warning'
                });
            }

        },

    },

    components:{
        exam
    }
            
}

       
</script>
